<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/layui2.45/css/layui.css"/>
    <script type="text/javascript" src="/bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/layui2.45/layui.js"></script>
</head>
<body>

<table id="demo" lay-filter="test">

</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            , url: '/city/findAllCityByPage' //数据接口
            , page: true //开启分页,
            , page: {
                limit: 10//每页显示的数据。默认10个
                , groups: 9
            }
            , request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: '10%', sort: true, fixed: 'left'}
                , {field: 'name', title: '城市名', width: '10%'}
                , {field: 'countryCode', title: '城市编号', width: '20%', sort: true}
                , {field: 'district', title: '行政代码', width: '20%'}
                , {field: 'population', title: '人口', width: '20%'}
                , {fixed:'right',width:'20%',align:'center',toolbar:'#barDemo'}
            ]]
        });
        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
                /*这里可以查看
                * */
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                    /**
                     * 在这里调用删除的ajax
                     */
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data));
                /**
                 * 在这里调用修改
                 */
            }
        });
    });
</script>
</body>
</html>